<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <style>
        body {
            padding-top: 70px;
        }

        .logoPic img {
            margin: 11px 0 0 -5px;
        }

        .logoPic {
            height: 50px;
            display: inline-block;
            zoom: 1;
            vertical-align: middle;
            background-repeat: no-repeat;
            padding: 0 10px 0 0;
            background-position: center center;
        }

        .tm-focus-banner {
            position: relative;
            margin-right: 20px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            z-index: initial;
        }

        .tm-ind-panel {
            border: 1px dotted #c9c9c9;
            border-width: 1px 0;
            margin: -1px 20px 0 0;
            padding: 10px 0;
            position: relative;
            overflow: hidden;
            clear: both;
            display: flex;
        }

        .tm-ind-item {
            float: left;
            width: 33%;
            text-align: center;
            position: relative;
            left: -1px;
            border-left: 1px solid #e5dfda;
            flex: 1;
            line-height: 16px;
        }

        li, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .tm-count {
            display: inline-block;
            line-height: 16px;
            height: 16px;
            color: #FF0036;
            font-weight: 700;
            margin-left: 3px;
        }

        .tb-btn-sku {
            margin-right: 10px;
            float: left;
        }

        .tb-btn-sku a {
            margin-right: 0;
            float: left;
            overflow: hidden;
            position: relative;
            width: 178px;
            background-color: #ffeded;
            border: 1px solid #FF0036;
            color: #FF0036;
            font-family: 'Microsoft Yahei';
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 16px;
            margin-top: 50px;
            margin-left: 50px;
        }

        .tb-btn-sku button {
            margin-right: 0;
            float: left;
            overflow: hidden;
            position: relative;
            width: 178px;
            background-color: #ffeded;
            border: 1px solid #FF0036;
            color: #FF0036;
            font-family: 'Microsoft Yahei';
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 16px;
            margin-top: 50px;
            margin-left: 50px;
        }

        .tm-promo-price {
            line-height: 24px;
            font-size: 20px;
            position: relative;
            vertical-align: middle;
            color: #FF0036;
            font-weight: bolder;
            font-family: Arial;
            -webkit-font-smoothing: antialiased;
        }

        .input {
            position: relative;
            margin-left: -424px;
            margin-top: 13px;
        }
    </style>

</head>
<body onload="getProductInfo()">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header" style="padding-left: 40px;">
        <a class="navbar-brand" href="#">
            <img alt="Brand" src="../src/校徽副本.png">
        </a>
    </div>
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">温州大学</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">最新活动</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">产品列表 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">产品1</a></li>
                        <li><a href="#">产品2</a></li>
                    </ul>

                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="indexLogin.html">注销</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">我的 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li role="separator" class="divider"></li>
                        <li><a onclick="toBasket()">购物车</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="indexLogin.html">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="col-sm-5 col-md-5">
            <img src="../src/显卡.png" alt="..." class="img-rounded img">
        </div>
        <div class="col-sm-7 col-md-7" id="titleDiv">

        </div>
    </div>

</div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    var product_Id = GetQueryString("ProductId")
    var userid = GetQueryString("UserID")
    var stock;

    function getProductInfo() {
        $.ajax({
            method: 'get',
            url: '/ProductInfoGetById',
            dataType: 'json',
            data: {product_Id: product_Id},
            success: function (message) {
                stock = message.data.product_Stcock
                var str = "<h1 id='title'>" + message.data.product_Name + "</h1>"
                str += "<div class=\"tm-focus-banner\" style=\"background-image: url(//img.alicdn.com/tfs/TB1T9BrivBNTKJjy0FdXXcPpVXa-1020-100.png); background-size: 510px 50px;\">"
                str += "<div class=\"logoPic\"><img src=\"../src/跨年狂欢.png\" height=\"28\"></div></div>"

                str += "<div class=\"tm-promo-price row\" style=\"color: #666\">"
                str += "<dt class=\"tb-metatit\" style=\"color: rgb(255, 0, 54); font-weight: bold;padding-left: 30px;padding-top: 10px\">跨年狂欢价<em class=\"tm-yen\" style='color: #b8de8e;margin-left: 40px'>¥</em><span class=\"tm-price\" style='color: #666;padding-left: 20px'>" + message.data.product_Price + "</span></div></dt>"

                str += "<ul class=\"tm-ind-panel\"><li class=\"tm-ind-item \" data-label=\"月销量\"><div class=\"tm-indcon\"><span class=\"tm-label\">月销量</span><span class=\"tm-count\">" + message.data.product_Selled + "</span></div></li>"
                str += "<li class=\"tm-ind-item\" id=\"J_ItemRates\"><div class=\"tm-indcon\"><span class=\"tm-label\">库存</span><span class=\"tm-count\">" + message.data.product_Stcock + "</span></div></li></ul>";

                str += "<input type='text' class='input' name='number' id='number' lay-verify='number'> 购买数"
                str += " <div class=\"tb-btn-buy tb-btn-sku\"><button id='buy' lay-filter=\"demo1\" onclick='buy()'>立即购买</button>" + "</div>"
                str += " <div class=\"tb-btn-buy tb-btn-sku\"><button id=\"J_LinkBuy\" rel=\"nofollow\" data-addfastbuy=\"true\" role=\"button\" onclick='addToBasket()'>加入购物车></button></div>"

                $("#titleDiv").html(str)
            }
        })
    }

</script>
<script src="../../static/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    function buy() {
        var num = $('#number').val()
        if (num > stock) {
            alert("库存不足，请少买一点")
        }else {
            $.ajax({
                method: 'get',
                url: '/Usr_Order',
                dataType: 'json',
                data: {id: product_Id, usr_Id: userid, num: num,status:1},
                success: function (message) {
                    alert(message.msg)
                }
            })
        }
    }
    function addToBasket(){
        var num = $('#number').val()
        if (num > stock) {
            alert("库存不足，请少买一点")
        }else {
            $.ajax({
                method: 'get',
                url: '/Usr_Order',
                dataType: 'json',
                data: {id: product_Id, usr_Id: userid, num: num,status:0},
                success: function (message) {
                    alert(message.msg)
                }
            })
        }
    }
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    var id = GetQueryString("UserID")
    function toBasket(){
        window.location.href='../usr/basketBall.html?UserId='+id;
    }
</script>
</html>